<template>
  <div class="viewContain">
    <el-form :model="listQuery" size="small" label-width="100px">
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="设备ip" style="text-align:center">
            <el-input v-model="listQuery.ip" placeholder="请输入设备ip" @keyup.enter.native="handleSearch" />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 5, offset:1 }" :xl="{ span: 6 }">
          <el-form-item label="设备所在区域">
            <el-input v-model="listQuery.area" placeholder="请输入设备所在区域" @keyup.enter.native="handleSearch" />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 5, offset:1 }" :xl="{ span: 6 }">
          <el-form-item label="设备序列号">
            <el-input v-model="listQuery.num" placeholder="请输入设备序列号" @keyup.enter.native="handleSearch" />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 5, offset:1 }" :xl="{ span: 6 }">
          <el-form-item label="设备所有者">
            <el-input v-model="listQuery.owner" placeholder="请输入设备所有者" @keyup.enter.native="handleSearch" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="设备xx">
            <el-select v-model="listQuery.uname" placeholder="xxxxxx">
              <el-option label="x1" value="1" />
              <el-option label="x2" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6,offset:1 }" :xl="{ span: 6 }">
          <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
          <el-button size="mini" type="primary" native-type="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      ref="table"
      v-loading="loading"
      fit
      stripe
      :data="tableData"
      border
      size="mini"
    >
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="设备名称" width="150" />
      <el-table-column prop="no" align="center" label="设备编号" width="150" />
      <el-table-column prop="ip" align="center" label="设备ip" />
      <el-table-column prop="num" align="center" label="设备序列号" />
      <el-table-column prop="owner" align="center" label="设备所有人" />
      <el-table-column align="center" fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button class="text-button" size="mini" @click="handleOpen(scope.row.id)">开启</el-button>
          <el-button class="text-button" size="mini" @click="hanleOff(scope)">关闭</el-button>
          <el-button class="text-button el-button--danger" size="mini" @click="handleStop(scope.row.id)">停用</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        pageSize: 10,
        pageNo: 1
      },
      loading: false,
      tableData: [
        {
          id: '1',
          name: 'xx',
          no: '123',
          ip: '192.101.11.123',
          num: 'xsxs11212e1',
          owner: '张三'
        },
        {
          id: '2',
          name: 'xxxxx',
          no: '121',
          ip: '192.101.11.223',
          num: 'xsxs1xx12e1',
          owner: '李四'
        }
      ]

    }
  },
  methods: {
    // 查询
    handleSearch() {},

    // 开启
    handleOpen() {},

    // 关闭
    hanleOff() {},

    // 停用
    handleStop() {}
  }
}
</script>
